<script setup lang="ts">
import type { MenuInst } from 'naive-ui'
import { useTabsStore } from '@/stores/modules/tabs'
import { getMenuList } from '@/utils/menu'
const router = useRouter()
const tabsStore = useTabsStore()
const isOpen = inject<Ref<boolean>>('isOpen')
const { getCurrenName: currentName, getOneMeun: meun } = storeToRefs(tabsStore)

const menuInstRef = ref<MenuInst | null>(null)
const menuOptions = ref([])
menuOptions.value = getMenuList(meun.value)

const handSelect = (name: string) => {
  router.push({
    name,
  })
}
</script>

<template>
  <n-menu
    ref="menuInstRef"
    :value="currentName"
    inverted
    accordion
    :collapsed="!isOpen"
    :collapsed-width="64"
    :collapsed-icon-size="22"
    :options="menuOptions"
    key-field="name"
    label-field="title"
    children-field="children"
    @update:value="handSelect"
  ></n-menu>
</template>

<style lang="scss" scoped></style>
